<template>
  <div id="app">
    <el-container class="main-container">
      <el-header class="main-header">
        <div class="brand">超外差收音机频率跟踪（MicroSound）</div>
      </el-header>
      <el-container class="sub-container">
        <el-main>
          <div id="myChart"></div>
        </el-main>
        <el-aside>
          <el-form label-width="120px">
            <el-collapse v-model="activeName">
              <el-collapse-item title="基础数据" name="base">
                <el-form-item label="中频频率">
                  <el-select v-model="center" @change="onCenterChange">
                    <el-option value="450" label="450K"></el-option>
                    <el-option value="455" label="455K"></el-option>
                    <el-option value="465" label="465K"></el-option>
                  </el-select>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="天线参数" name="ant">
                <el-form-item label="标准频率(kHz)"><b>{{ fRange1 }}</b></el-form-item>
                <el-form-item label="实际频率(kHz)"><span :style="{ 'color': rangeMinError1 ? 'red' : '' }">{{ fMin1 }}</span>~<span
                    :style="{ 'color': rangeMaxError1 ? 'red' : '' }">{{ fMax1 }}</span></el-form-item>
                <el-form-item label="电感(uh)"><el-input-number @wheel="$event => onWheel('l1', $event)" :min="1"
                    v-model="l1"></el-input-number></el-form-item>
                <el-form-item label="电容最小(pf)"><el-input-number @wheel="$event => onWheel('cMin1', $event)" :min="1"
                    v-model="cMin1"></el-input-number></el-form-item>
                <el-form-item label="电容最大(pf)"><el-input-number @wheel="$event => onWheel('cMax1', $event)" :min="1"
                    v-model="cMax1"></el-input-number></el-form-item>
                <el-form-item label="补偿电容(pf)"><el-input-number @wheel="$event => onWheel('repair1', $event)" :min="1"
                    v-model="repair1"></el-input-number></el-form-item>
                <el-form-item label="垫整电容(pf)"><el-input-number @wheel="$event => onWheel('padding1', $event)" :min="1"
                    v-model="padding1"></el-input-number></el-form-item>
              </el-collapse-item>
              <el-collapse-item title="本振参数" name="osc">
                <el-form-item label="标准频率(kHz)"><b>{{ fRange2 }}</b></el-form-item>
                <el-form-item label="实际频率(kHz)"><span :style="{ 'color': rangeMinError2 ? 'red' : '' }">{{ fMin2 }}</span>~<span
                    :style="{ 'color': rangeMaxError2 ? 'red' : '' }">{{ fMax2 }}</span></el-form-item>
                <el-form-item label="电感(uh)"><el-input-number @wheel="$event => onWheel('l2', $event)" :min="1"
                    v-model="l2"></el-input-number></el-form-item>
                <el-form-item label="电容最小(pf)"><el-input-number @wheel="$event => onWheel('cMin2', $event)" :min="1"
                    v-model="cMin2"></el-input-number></el-form-item>
                <el-form-item label="电容最大(pf)"><el-input-number @wheel="$event => onWheel('cMax2', $event)" :min="1"
                    v-model="cMax2"></el-input-number></el-form-item>
                <el-form-item label="补偿电容(pf)"><el-input-number @wheel="$event => onWheel('repair2', $event)" :min="1"
                    v-model="repair2"></el-input-number></el-form-item>
                <el-form-item label="垫整电容(pf)"><el-input-number @wheel="$event => onWheel('padding2', $event)" :min="1"
                    v-model="padding2"></el-input-number></el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
/* eslint-disable */
import { reactive, toRefs, watch, onMounted, computed } from 'vue'
import * as echarts from 'echarts';

export default {
  name: 'App',
  setup() {
    const state = reactive({
      center: "455",//中频
      activeName: 'base',
      //ant
      l1: 335,
      cMin1: 10,
      cMax1: 270,
      repair1: 1,//补偿
      padding1: 10000,//垫整
      fRange1: '535～1605',//标准频率
      fMin1: 0,
      fMax1: 0,
      //osc
      l2: 178,
      cMin2: 10,
      cMax2: 270,
      repair2: 10,//补偿
      padding2: 300,//垫整
      fRange2: '990～2060',//标准频率
      fMin2: 0,
      fMax2: 0,
    })
    let chartInstance = ''
    const setOption = () => {
      const option = {
        legend: {
          show: true,
          padding: 10,
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        xAxis: {
          name: '电容量(1-n%)',
          type: 'category',
          data: []
        },
        yAxis: {
          name: '频率(kHz)',
          type: 'value',
          axisLine: {
            show: true,
          }
        },
        series: [
          {
            name: '天线频率(kHz)',
            data: [],
            type: 'line',
            smooth: true
          },
          {
            name: '本振频率(kHz)',
            data: [],
            type: 'line',
            smooth: true
          },
          {
            name: '差频频率(kHz)',
            data: [],
            type: 'line',
            smooth: true
          },
          {
            name: '中频频率(kHz)',
            data: [],
            type: 'line',
            lineStyle: {
              type: 'dashed',
            },
            smooth: true
          }
        ]
      };
      const center = state.center
      //ant
      const l1 = state.l1
      const cMin1 = state.cMin1
      const cMax1 = state.cMax1
      const repair1 = state.repair1
      const padding1 = state.padding1
      //osc
      const l2 = state.l2
      const cMin2 = state.cMin2
      const cMax2 = state.cMax2
      const repair2 = state.repair2
      const padding2 = state.padding2
      //
      const getFrequency = (l, c, r, p) => {
        //防止除0错误
        if (c <= 0) c = 1
        if (r <= 0) r = 1
        if (p <= 0) p = 10000
        //
        const c1 = 1 / (1 / (parseInt(c) + parseInt(r)) + 1 / parseInt(p))
        const l1 = parseInt(l)
        const t = 2 * Math.PI * Math.sqrt(l1 * (1e-6) * c1 * (1e-12))
        const f = 1 / (t * 1000)
        return Math.round(f)
      }
      for (let i = 100; i >= 0; i -= 5) {
        option.xAxis.data.push((100 - i).toFixed(0) + '%')
        const c1 = cMin1 + (cMax1 - cMin1) * i / 100
        const f1 = getFrequency(l1, c1, repair1, padding1)
        option.series[0].data.push(f1)
        const c2 = cMin2 + (cMax2 - cMin2) * i / 100
        const f2 = getFrequency(l2, c2, repair2, padding2)
        option.series[1].data.push(f2)
        option.series[2].data.push(f2 - f1)
        option.series[3].data.push(center)
        if (i == 100) {
          state.fMin1 = f1
          state.fMin2 = f2
        }
        if (i == 0) {
          state.fMax1 = f1
          state.fMax2 = f2
        }
      }
      if (chartInstance) chartInstance.setOption(option);
    }
    onMounted(() => {
      chartInstance = echarts.init(document.getElementById('myChart'));
      setOption()
    })
    watch([state], setOption);

    const onCenterChange = (center) => {
      state.fRange2 = `${535 + parseInt(center)}～${1605 + parseInt(center)}`
    }
    const onWheel = (name, event) => {
      const { deltaY } = event
      if (deltaY > 0) state[name]++
      if (deltaY < 0) state[name]--
    }
    const rangeMinError1 = computed(() => {
      const fMin1 = state.fMin1
      if (fMin1 > 535) return true
      return false
    })
    const rangeMaxError1 = computed(() => {
      const fMax1 = state.fMax1
      if (fMax1 < 1605) return true
      return false
    })
    const rangeMinError2 = computed(() => {
      const center = state.center
      const fMin2 = state.fMin2
      if (fMin2 < 535 + parseInt(center)) return true
      return false
    })
    const rangeMaxError2 = computed(() => {
      const center = state.center
      const fMax2 = state.fMax2
      if (fMax2 < 1605 + parseInt(center)) return true
      return false
    })
    return {
      ...toRefs(state),
      rangeMinError1,
      rangeMaxError1,
      rangeMinError2,
      rangeMaxError2,
      onWheel,
      onCenterChange,
    }
  },
}
</script>
<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 0px;
  overflow: hidden;
}

.el-main {
  border-right: solid 1px #dcdfe6;
  overflow: hidden;
}

.main-header {
  position: relative;
  z-index: 10;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  color: #fff;
  background-color: #2e2e2e;
  box-shadow: 0 2px 12px #0000001a
}

.main-header .brand {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-decoration: none
}

.main-container {
  height: calc(100%);
}

.sub-container {
  height: calc(100% - 60px);
}

#myChart {
  width: calc(100%);
  height: calc(100% - 100px);
}

.el-aside {
  padding: 0 20px;
  height: calc(100% - 100px);
}</style>
